<template>
    <div class="dy-main BringForwardInput">
      <div class="dy-header">
        <x-header :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">转账汇款<a href="javascript:void(0)" slot="right" @click="toTran">次日转账查询</a></x-header>
      </div>
      <div class="dy-body">
        <div class="dy-wapper">
        <zx-card :cardList="AccountList" @on-change="setOutCardInfo"></zx-card>
        <div class="AmtBox">
          <div class="Amttitle"><span class="title">转账金额</span><p><span>{{showTranMode}}</span><a href="javascript:void(0)" @click="showDropdown">更换</a></p></div>
          <div class="tranBox">
            <label for="tranAmt">￥</label>
            <div>
              <input type="text" id="tranAmt" placeholder="请输入转账金额" v-model="formVal.tranAmt.val" @blur="checkAmtMax">
            </div>
          </div>
        </div>
         <p class="error"><span v-if="error"><img src="../../../static/icon/warming.svg" alt="">所输金额不能超过余额范围！</span></p>
        <group gutter="0">
          <p>{{byx}}</p>
          <x-input title="收款人" placeholder="请输入收款人姓名" v-model="formVal.payeeName.val" label-width="1.96rem">
            <a slot="right" href="javascript:void(0)" @click="toRegister">
              <img src="../../../static/icon/me.svg" class="register">
            </a>
          </x-input>
          <x-input title="收款账号" placeholder="请输入收款人账号" mask="9999 9999 9999 9999 9999" v-model="formVal.payeeNo.val" label-width="1.96rem" @on-change="getPayeeNo"></x-input>
          <popup-picker popup-title="请选择开户行" title="收款银行" :data="bankList" v-model="value_bankCode" placeholder="请选择银行" v-if="routeFlag === '2'"></popup-picker>
          <x-input  title="收款银行" @click.native="toSearchBank" v-model="formVal.bankCode.val" label-width="1.96rem" readonly v-if="routeFlag === '1'"><img src="../../../static/icon/leftArrow.svg" slot="right"></x-input>
          <x-input title="收款网点" @click.native="toSearchBranch" label-width="1.96rem" placeholder="选择网点" v-model="formValtwo.bankBranch.val" readonly v-if="routeFlag === '3'"><img src="../../../static/icon/leftArrow.svg" slot="right"></x-input>
          <!-- <popup-picker popup-title="请选择" title="转出账号" :data="AccountList" v-model="value_cardNo" placeholder="请选择账号"></popup-picker>
          <cell title="余额">{{balanceAmt | filterMoney}}元</cell>
          <x-input title="转账金额" placeholder="请输入转账金额" v-model="formVal.tranAmt.val"></x-input>
          <cell title="转账方式" @click.native="showDropdown" :value="requestData.tranMode" is-link></cell> -->
          <!--此处为本行和超级网银展示区-->
          <x-input title="通知短信" placeholder="收款人手机号（可不填）" label-width="1.96rem" v-model="requestData.mobile"></x-input>
          <x-input title="附言" placeholder="转账备注（可不填）" v-model="requestData.remark" @on-focus="showMark = !showMark" label-width="1.96rem"><i slot="right" class="risk" :class="{roll : showMark == true}"></i></x-input>
          <!--此处为本行和超级网银展示区-->
        </group>
        <transition name="slide">
          <div class="fuyan" v-if="showMark" @click="gongzi($event)">
            <span style="margin-left:.36rem">{{list.gongzi0}}</span>
            <span>{{list.gongzi1}}</span>
            <span>{{list.gongzi2}}</span>
            <span>{{list.gongzi3}}</span>
            <span>{{list.gongzi4}}</span>
          </div>
        </transition>
        <!-- <group v-if="routeFlag === '3'">
            <popup-picker popup-title="请选择" title="开户地" :data="areaList" v-model="requestData.bankBranch" placeholder="请选择开户地"></popup-picker>
            <popup-picker popup-title="请选择" title="开户支行" :data="bankList" v-model="requestData.bankCode" placeholder="请选择银行卡"></popup-picker>
            <x-input title="手机号" placeholder="请输入手机号(可不填)" v-model="requestData.mobile"></x-input>
            <x-input placeholder="请输入备注" v-model="requestData.remark"></x-input>
        </group> -->
        <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
        <actionsheet v-model="tranShow" :menus="menus1" @on-click-menu="setValue">
          <p slot="header" class="actionHeader">选择转账方式</p>
        </actionsheet>
        <!-- <zx-dialog v-model="overTop" type="warn" title="" butType="button" :data="['确认']" tipsmsg="您的转账金额大于实时转账限额，已转为普通转账方式（24小时内汇出款项）" @on-click-yes="overTopYes"></zx-dialog> -->
        <div class="submitBtn">
          <x-button type="primary" @click.native="toNext(formVal)" :disabled="allowClick">下一步</x-button>
        </div>
        <!-- <div class="warm">
          <p>温馨提示</p>
          <p>转账资金<span style="color:#FF3333">2-4小时</span>后到账，节假日及非工作时间顺延</p>
        </div> -->
        </div>
      </div>
    </div>
</template>

<script>
export default{
  data () {
    return {
      isSelfBank: '', // 是否是本行卡标签，0-他行 1-本行
      overTop: 0, // 转账金额超过5万提示弹窗显隐
      list: {
        gongzi0: '工资',
        gongzi1: '还款',
        gongzi2: '房租',
        gongzi3: '生活费',
        gongzi4: '贷款'
      },
      byx: '',
      showMark: false,
      errormsg: '',
      error: 0, // 控制转账金额错误提示
      showPositionValue: false,
      bankList: [['其他']], // 收款银行列表
      AccountList: [], // 转出账号列表
      areaList: [['宁波', '三门']], // 开户地列表
      menus1: { // 转账方式选择
        menu1: '普通到账',
        menu2: '次日到账'
      },
      showTranMode: '普通转账', // 显示的转账方式
      tranShow: false, // 转账方式弹层显隐
      balanceAmt: '', // 余额
      routeFlag: '2', // 转账方式 1-本行转账，2-超级网银转账， 3-二代支付转账
      requestData: {
        tranMode: '1', // 到账模式  1-普通到账 2-次日到账
        mobile: '', // 接收短信号码
        remark: '' // 备注
      },
      value_bankCode: [],
      formVal: {
        payeeName: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '姓名长度不能小于2'}, {typeName: 'specialCharacter', typeVal: '', msg: '输入违法字符'}]},
        payeeNo: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '收款账号不能为空'}, {typeName: 'maxLen', typeVal: '24', msg: '最大长度不能超过19位'}, {typeName: 'cardNumber', typeVal: '', msg: '收款账号错误'}, {typeName: 'specialCharacter', typeVal: '', msg: '输入违法字符'}]},
        bankCode: {val: '', type: [{typeName: 'placeholder', typeVal: '选择银行', msg: '请选择收款银行'}]},
        cardNo: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '转出账号不能为空'}]},
        tranAmt: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '转账金额不能为空'}, {typeName: 'maxLen', typeVal: '24', msg: ''}, {typeName: 'specialCharacter', typeVal: '', msg: '输入违法字符'}, {typeName: 'money', typeVal: '', msg: '转款金额错误'}]}
      },
      formValtwo: {
        bankBranch: {val: '', type: [{typeName: 'placeholder', typeVal: '选择网点', msg: '请选择收款网点'}]}
      }
    }
  },
  watch: {
    'formVal.tranAmt.val': function (val) { // 检测输入的金额是否超过余额
      this.checkAmt(val)
    },
    'balanceAmt': function (val) {
      this.checkAmt(this.formVal.tranAmt.val)
    },
    'value_bankCode': function (val) {
      if (val[0] === '其他') {
        this.routeFlag = '3'
      } else {
        this.formVal.bankCode.val = val[0]
      }
    }
  },
  computed: {
    bringForwardInfo () {
      return this.$store.getters.getBringForwardInfo
    },
    allowClick () { // 按钮点击许可
      if (this.routeFlag === '1' || this.routeFlag === '2') {
        return this.formVal.payeeName.val === '' || this.formVal.payeeNo.val === '' || this.formVal.bankCode.val === '' || this.formVal.cardNo.val === '' || this.formVal.tranAmt.val === ''
      }
      if (this.routeFlag === '3') {
        return this.formVal.payeeName.val === '' || this.formVal.payeeNo.val === '' || this.formVal.cardNo.val === '' || this.formVal.tranAmt.val === '' || this.formValtwo.bankBranch.val === ''
      }
      return false
    }
  },
  created () {
  },
  methods: {
    /*
    * 判断是否是本行转账, 回显开户银行
    */
    getPayeeNo () {
      if (this.routeFlag !== '1') return true
      this.formVal.bankCode = this.getOpenBank(this.formVal.payeeNo)
    },
    /*
    * 获取卡号对应的开户行，判断是否为本行卡
    * 0 - 他行卡， 1 - 本行卡
    */
    getOpenBank (cardNo) {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryOpenAccountBank', 'basic_Data': JSON.stringify({'cardNo': cardNo})}
        }),
        (response) => {
          // alert(response)
          // this.isSelfBank = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.isSelfBank = rep.body.localFlag
            if (this.isSelfBank === '1') {
              this.routeFlag = '1'
            } else {
              this.routeFlag = '2'
            }
            return rep.body.bankName
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    },
    checkAmt (val) {
      let Amt = this.$publicFun.replaceChar(this.balanceAmt, ',')
      if (parseFloat(val) > parseFloat(Amt)) {
        this.error = 1
      } else {
        this.error = 0
      }
    },
    checkAmtMax () {
      this.getRouteFlag()
      this.setInfoToVuex()
      if (parseFloat(this.formVal.tranAmt.val) > 50000) {
        this.overTop = 1
      } else {
        this.overTop = 0
      }
    },
    overTopYes () {
      this.overTop = 0
    },
    gongzi (e) {
      let a = e.target.innerHTML
      console.log(a)
      let b = e.target.nodeName.toLowerCase()
      if (b === 'span') {
        this.requestData.remark = a
      }
    },
    toSearchBranch () {
      this.setInfoToVuex()
      this.$router.push({path: 'BringForwardSearchBranch'})
    },
    toSearchBank () {
      this.setInfoToVuex()
      if (this.routeFlag === '1') return true
      this.$router.push({path: 'BringForwardSearchBank'})
    },
    toRegister () {
      this.setInfoToVuex()
      this.$router.push({path: 'BringForwardRegister'})
    },
    toTran () {
      this.$router.push({path: 'BringForwardTranDetail'})
    },
    back () {
      this.$publicFun.goBack(this)
    },
    toNext () {
      for (let key in this.formVal) {
        let lObj = this.formVal[key]
        let lRes = this.$publicFun.formCheck(lObj)
        if (!lRes.isOK) {
          this.errormsg = lRes.msg
          this.showPositionValue = true
          return false
        }
      }
      if (this.routeFlag === '3') {
        for (let key in this.formValtwo) {
          let lObj = this.formValtwo[key]
          let lRes = this.$publicFun.formCheck(lObj)
          if (!lRes.isOK) {
            this.errormsg = lRes.msg
            this.showPositionValue = true
            return false
          }
        }
      }
      if (this.error === 1) {
        return false
      }
      this.$router.push({path: 'BringForwardIptSure'})
    },
    showDropdown () { // 转账方式下拉框
      this.tranShow = true
    },
    setValue (val) {
      if (val === 'menu1') {
        this.requestData.tranMode = '1'
        this.showTranMode = '普通转账'
      } else {
        this.requestData.tranMode = '2'
        this.showTranMode = '次日到账'
      }
    },
    getRouteFlag () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryTransferAccountType', 'basic_Data': JSON.stringify({'payeeNo': this.formVal.cardNo.val, 'tranAmt': this.formVal.tranAmt.val})}
        }),
        (response) => {
          // alert(response)
          // this.routeFlag = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.routeFlag = rep.body.routeFlag
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    },
    setValueFromInfo () { // 离开之后在回来，要显示已经输入过的信息
      if (this.bringForwardInfo.cardNo !== '') {
        this.formVal.cardNo.val = this.bringForwardInfo.cardNo
      }
      if (this.bringForwardInfo.transferMoney !== '') {
        this.formVal.tranAmt.val = this.bringForwardInfo.transferMoney
        this.checkAmt(this.formVal.tranAmt.val)
      }
      if (this.bringForwardInfo.getManName !== '') {
        this.formVal.payeeName.val = this.bringForwardInfo.getManName
      }
      if (this.bringForwardInfo.getCardNo !== '') {
        this.formVal.payeeNo.val = this.bringForwardInfo.getCardNo
      }
      if (this.bringForwardInfo.getBank !== '') {
        this.formVal.bankCode.val = this.bringForwardInfo.getBank
      }
      if (this.bringForwardInfo.getNetPoint !== '') {
        this.formValtwo.bankBranch.val = this.bringForwardInfo.getNetPoint
      }
      if (this.bringForwardInfo.tranMode !== '') {
        this.requestData.tranMode = this.bringForwardInfo.tranMode
      }
      if (this.bringForwardInfo.msg !== '') {
        this.requestData.remark = this.bringForwardInfo.msg
      }
      if (this.bringForwardInfo.routeFlag !== '') {
        this.routeFlag = this.bringForwardInfo.routeFlag
      }
    },
    setInfoToVuex () { // 将信息保存到状态管理
      // 添加信息状态管理
      let lBringForwardInfo = {
        transferMoney: this.formVal.tranAmt.val, // 转账金额
        getManName: this.formVal.payeeName.val, // 收款人姓名
        getCardNo: this.formVal.payeeNo.val, // 收款人账号
        getBank: this.formVal.bankCode.val, // 收款银行
        getNetPoint: this.formValtwo.bankBranch.val, // 收款网点
        tranMode: this.requestData.tranMode, // 到账模式
        msg: this.requestData.remark, // 附言
        cardNo: this.formVal.cardNo.val, // 转出卡号
        routeFlag: this.routeFlag // 转账模式
      }
      this.$store.commit('setBringForwardInfo', lBringForwardInfo) // 将数据保存到状态管理
    },
    setOutCardInfo (val) {
      this.formVal.cardNo.val = val[0]
      this.balanceAmt = val[1]
      this.getOpenBank(val[0]) // 判断转出卡号是否为本行卡
    },
    getPayBank () {
      if (this.routeFlag !== '2') return true
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'querySuperNetSilverBank', 'basic_Data': JSON.stringify({})}
        }),
        (response) => {
          // alert(response)
          // this.byx = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            let len = rep.body.length
            for (let i = 0; i < len; i++) {
              this.bankList[0].push(rep.body[i].ptyAlsNm)
            }
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    },
    /*
    * 加挂卡查询
    */
    getCardNo () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'addCardList', 'basic_Data': JSON.stringify({'clientNo': this.$store.getters.getClientNo, 'capitalFlag': '1'})}
        }),
        (response) => {
          // alert(response)
          // this.byx = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            if (rep.body.length > 0) {
              let len = rep.body.arrays
              for (let i = 0; i < len; i++) {
                if (rep.body.arrays[i].status === 'N') {
                  this.AccountList = rep.body.arrays[i].cardNo
                }
              }
            } else {
            }
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    }
  },
  mounted: function () {
    this.setValueFromInfo()
    this.getPayBank() // 获取超级网银开户行
    this.getCardNo() // 获取加挂卡列表
  }
}
</script>

<style lang="less">
.BringForwardInput{
  height: 100%;
  overflow-y: auto;
  .risk{
      display: inline-block;
      background: url(../../../static/icon/leftArrow.svg) no-repeat center center;
      width: .24rem;
      height: .24rem;
      transform: rotate(90deg);
      &.roll{
        transform: rotate(-90deg);
        transition:all .5s;
      }
    }
  .register{
    position: absolute;
    top: .26rem;
    right: .25rem;
  }
  .remark{
    position: relative;
      &>input{
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-left: 1rem;
      }
    }
  .fuyan {
    display: flex;
    overflow: hidden;
    height: 1.2rem;
    padding-top: 0.3rem;
    background: #fff;
    justify-content: center;
      span{
        width:1.08rem;
        display: inline-block;
        background:rgba(247,247,247,1);
        font-size:.28rem;
        color:#333;
        border-radius: 0.08rem ;
        margin:0 .3rem 0 0;
        padding-top: .08rem;
        text-align: center;
        height: .56rem;
      }
  }
  .submitBtn{
    padding: .64rem .3rem;
  }
  .warm{
    width: 100%;
    padding: .36rem .3rem;
    color: #999;
    &>p{
      padding-bottom: .27rem;
    }
  }
  .AmtBox{
    position: relative;
    width: 100%;
    height: 2.3rem;
    padding: .4rem 0;
    background: #fff;
    .tranBox{
      position:relative;
      padding-left:.62rem;
      label{
        position:absolute;
        top: .2rem;
        left: .2rem;
        font-size: .32rem;
        color: #333;
      }
      div{
        width: 100%;
        padding-right: .28rem;
        border-bottom: 1px solid #eee;
        input{
          width: 100%;
          font-size: .52rem;
        }
      }
    }
    .Amttitle {
      width: 100%;
      overflow: hidden;
      padding: 0 .28rem .38rem;
      .title{
        font-size: .32rem;
        color: #333;
      }
      p {
        float: right;
        font-size: .24rem;
        color: #666;
        padding-top: .04rem;
        a{
          color: #F28300;
          padding-left: .16rem;
        }
      }
    }
  }
  .error{
    width: 100%;
    font-size: .24rem;
    padding: .12rem .28rem;
    color: #FF3F3F;
    img{
      vertical-align: middle;
      margin-right: .12rem;
    }
  }
}
.slide-enter-active, .slide-leave-active { max-height:2rem; transition: max-height .2s ease; }
.slide-enter, .slide-leave-to { max-height: 0; }
</style>
